<template>
  <div class="body overflow-scroll">
    <payPwdPop
      ref="payPwdRef"
      @confirm="postPostsPay"
      :payInfo="payObjInfo"
      :showGoldName="false"
    ></payPwdPop>

    <div class="min-width f-a-c f-j-a-c accoutSetting">
      <div class="left">
        <div class="demo-collapse">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item
              :title="item[0].text"
              :name="index"
              v-for="(item, index) in SettingList"
              :key="index"
            >
              <div
                class="leftbox f-a-c"
                v-for="(items, indexs) in item"
                :key="indexs"
                @click="SettingListClick(index, indexs)"
              >
                <div v-if="indexs != 0" class="f-a-c left_item">
                  <svg-icon class="svg1" :name="items.svg1"></svg-icon>
                  <svg-icon class="svg" :name="items.svg"></svg-icon>
                  <span>{{ items.text }}</span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <div class="f-d-c" style="min-width: 780px">
        <div class="right" v-if="current != 6">
          <div class="text" v-if="current < 3 && current >= 0">
            {{
              current == 0
                ? "个人信息"
                : current == 1
                ? "绑定账号"
                : "设置支付密码"
            }}
          </div>
          <div v-if="current == 2">
            <div class="info" style="width: 300px">
              <span
                style="color: #ff425b"
                v-if="!minUserInfo.paycode || passwordSuccess"
                >请输入6位支付密码</span
              >
              <div
                class="inputbox email"
                style="height: 46px"
                v-if="minUserInfo.paycode && !passwordSuccess"
              >
                <input
                  type="number"
                  maxlength="6"
                  placeholder="请输入旧密码"
                  v-model.trim="password"
                />
              </div>
              <div
                class="inputbox email"
                style="height: 46px"
                v-if="!minUserInfo.paycode || passwordSuccess"
              >
                <input
                  type="number"
                  maxlength="6"
                  :placeholder="
                    minUserInfo.paycode
                      ? '请输入修改的支付密码'
                      : '请输入新支付密码'
                  "
                  v-model.trim="password"
                />
              </div>
            </div>
            <div
              class="info f-a-c"
              style="margin-top: 0; margin-top: 10px"
              v-if="passwordSuccess"
            >
              <div
                class="inputbox email f-a-c"
                style="width: 300px; height: 46px; margin-top: 0"
              >
                <input
                  type="number"
                  maxlength="6"
                  :placeholder="
                    passwordstatus
                      ? '请再次输入修改的支付密码'
                      : '请再次输入新支付密码'
                  "
                  v-model.trim="password1"
                />
              </div>
            </div>
            <div class="buttonlist f-a-c" @click="xiupaycode">
              <div class="save f-j-a-c click">
                <span>保存</span>
              </div>
            </div>
          </div>
          <div v-if="current == 1">
            <div class="info" style="width: 300px">
              <span>绑定手机号:</span>
              <div class="inputbox email f-a-c" style="height: 46px">
                <span>{{ userinfo.phone }}</span>
                <!-- <input type="text" placeholder="请输入手机号"  /> -->
              </div>
            </div>
            <!-- <div class="info f-a-c" style="margin-top: 0; margin-top: 10px">
              <div
                class="inputbox email f-a-c"
                style="width: 300px; height: 46px; margin-top: 0"
              >
                <input type="text" placeholder="请输入验证码" />
              </div>
              <div class="daojishi f-j-a-c click">发送验证码</div>
            </div> -->
            <div class="banding f-d-c">
              <span>已绑定的第三方账号</span>
              <!-- <span>绑定第三方账号后， 大家可以通过更多的渠道关注你。</span> -->
            </div>
            <div class="bandingitem f-a-c">
              <!-- <svg-icon name="icon-weixin-w" class="wei"></svg-icon> -->
              <svg-icon name="icon-weixins" class="wei"></svg-icon>
              <!-- <div class="banbutton click f-j-a-c" @click="bandingClick">
                绑定
              </div> -->
              <div class="weibanding">已绑定</div>
            </div>
          </div>
          <div v-if="current == 0">
            <div class="userimg f-a-c">
              <div class="imgbox">
                <div class="imgzhe f-j-a-c">
                  <svg-icon class="sctx" name="icon-sctx"></svg-icon>
                </div>
                <img :src="avatar ? avatar : moren" alt="" />
              </div>
              <upload
                class="upload-demo f-j-a-c"
                ref="uploadRef"
                @fileQueued="fileQueued"
                @sucess="uploadsucess"
                fileName="infoFile"
                :maxSize="5"
              >
                <div class="upimg f-j-a-c click">点击上传头像</div>
              </upload>
              <!-- <div class="shiming click f-a-c f-j-a-c">
                <svg-icon name="icon-renzheng"></svg-icon>
                <span>实名认证</span>
              </div> -->
            </div>
            <div class="userinfo f-a-c">
              <div class="userimg">
                <span>昵称</span>
                <div class="inputbox">
                  <input
                    type="text"
                    placeholder="请输入昵称"
                    v-model="name"
                    maxlength="10"
                  />
                </div>
              </div>
              <!-- <div class="userimg">
                <span>所在城市</span>
                <div class="inputbox">
                  <input
                    type="text"
                    placeholder="请输入所在城市"
                    v-model="city"
                  />
                </div>
              </div> -->
            </div>
            <div class="xinbie">
              <span>性别</span>
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="radio1" class="ml-4">
                  <el-radio :label="0" size="large">保密</el-radio>
                  <el-radio :label="1" size="large">男</el-radio>
                  <el-radio :label="2" size="large">女</el-radio>
                </el-radio-group>
              </div>
            </div>
            <!-- <div class="info">
              <span>个人主页</span>
              <div class="inputbox" style="height: 46px">
                <input
                  type="text"
                  placeholder="微博/小红书/哔哩哔哩/微信公众号"
                  v-model="linkdetail"
                />
              </div>
            </div> -->
            <div class="info">
              <span>个人简介</span>
              <div class="inputbox">
                <textarea
                  class="textarea"
                  name=""
                  id=""
                  cols="30"
                  placeholder="这个人很懒什么都没写..."
                  rows="10"
                  maxlength="200"
                  v-model="textareatext"
                  @input="inputtext"
                ></textarea>
                <div class="span">{{ textareatext.length }}</div>
              </div>
            </div>
            <div class="buttonlist f-a-c">
              <div class="save f-j-a-c click" @click="getModnickname">
                <span>保存</span>
              </div>
              <div class="save quxiao f-j-a-c click">
                <span>取消</span>
              </div>
            </div>
          </div>
          <!-- 我的余额 -->
          <div v-if="current == 4 && !judgmentCheck">
            <div class="yuetop">
              当前可用余额
              <el-popover
                :visible="visible"
                title="温馨提示"
                placement="top"
                :width="605"
              >
                <div>
                  <p>1、余额分为充值余额和收益余额,充值余额可通过充值获取;</p>
                  <p>
                    2、充值成功后，余额可能存在延迟现象，一般1到5分钟内到账，如有问题，请咨询客服；
                  </p>
                  <p>
                    3、收益可以转入余额进行消费，但是一旦收益转入余额不可退款；
                  </p>
                  <p>
                    4、充值金额输入值必须是不小于5元不可大于5000元的正整数；
                  </p>
                  <p>5、满足微信的充值方式;</p>
                  <p>
                    6、充值完成后，您可以进入账户充值记录页面进行查看余额充值状态,系统也会发送消息提示充值成功;
                  </p>
                  <p>7、一旦充值成功不可退款。</p>
                </div>
                <template #reference>
                  <svg-icon name="icon-wh"></svg-icon>
                </template>
              </el-popover>
            </div>
            <div class="balanceList f-a-c f-j-sb-a-c">
              <div
                class="balanceitem f-d-c f-j-a-c"
                v-for="(item, index) in balanceList"
                :key="index"
              >
                <span
                  ><span style="font-size: 14px">￥</span>{{ item.num }}</span
                >
                <span>{{ item.title }}</span>
              </div>
            </div>
            <div class="chongzhi f-j-a-c">
              <div class="gochong f-j-a-c click" @click="judgmentCheckclick()">
                去充值
              </div>
            </div>
          </div>
          <!-- 我的余额---去充值 -->
          <div v-if="judgmentCheck">
            <div class="Fueloil">
              <div class="Fueloil_top f-a-c">
                <div
                  class="item click f-a-c f-j-a-c"
                  v-for="(item, index) in chongzhi"
                  :key="index"
                  @click="chongzhiCLick(index)"
                  :style="{
                    'background-image':
                      chongzhiCurrent == index
                        ? 'url(' + chongzhi[chongzhiCurrent].bgi + ')'
                        : '',
                  }"
                >
                  <span :style="{ color: item.color }">{{ item.text }}</span>
                  <span :style="{ color: item.color1 }">{{ item.yao }}</span>
                </div>
              </div>
              <div class="chooseFueloil">
                <span>{{
                  chongzhiCurrent == 0 ? "选择充值金额" : "选择购买套餐"
                }}</span>

                <div class="FUeloilMonye f-a-c">
                  <div
                    class="moneyitem click f-d-c f-j-a-c"
                    v-for="(item, index) in Fuoil"
                    :key="index"
                    @click="selectFuoil(item, index)"
                    :class="moneyitemcurrent == index ? 'moneyitemactive' : ''"
                  >
                    <div
                      class="xianshi"
                      v-if="chongzhiCurrent == 1 && index == 2"
                    >
                      <div class="xiashiie f-j-a-c">
                        <svg-icon class="youhui" name="youhui"> </svg-icon>
                        <span>限时优惠</span>
                      </div>
                    </div>
                    <div
                      class="xianshi"
                      style="left: -9px"
                      v-if="chongzhiCurrent == 0 && index == 2"
                    >
                      <div class="xiashiie f-j-a-c">
                        <svg-icon
                          class="youhui"
                          style="width: 120px"
                          name="youhuia"
                        >
                        </svg-icon>
                        <span style="left: ">90%设计师选择</span>
                      </div>
                    </div>
                    <svg-icon
                      v-if="moneyitemcurrent == index"
                      name="icon-check"
                      class="icon-check"
                    ></svg-icon>
                    <div class="moneybox f-j-a-c f-d-c">
                      <span>
                        {{ item.sales }}
                        {{ chongzhiCurrent == 0 ? "元" : "" }}
                      </span>
                      <span>
                        {{ item.price }}
                        {{ chongzhiCurrent == 0 ? "元" : "元" }}</span
                      >
                    </div>
                    <div class="moneybottom f-j-a-c">
                      <span v-if="chongzhiCurrent == 1"
                        >赠送{{ item.coins + coinsConfig.name }}</span
                      >
                      <span v-else>￥{{ item.price }}元</span>
                    </div>
                  </div>
                  <div
                    class="moneyitem f-d-c f-j-a-c click"
                    v-if="chongzhiCurrent == 0"
                  >
                    <div class="moneybox f-j-a-c f-d-c">
                      <span>自定义充值</span>
                      <input
                        type="number"
                        v-model="rechargeAmountInput"
                        @keydown.enter="inputEnter"
                        placeholder="自定义金额"
                      />
                    </div>
                    <div class="moneybottom f-j-a-c">
                      <span>输入完成后请按Enter键确认</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="paymoney f-a-c f-j-a-c">
                <span>应付金额:</span
                ><span
                  >{{ rechargeAmount || 0 }}
                  {{ chongzhiCurrent == 0 ? "元" : "元" }}</span
                >
              </div>

              <!-- <div class="time f-j-a-c">支付倒计时：{{ minutes }}:{{ seconds }}</div> -->

              <!-- 支付二维码 -->
              <!-- v-if="chongzhiCurrent == 0" -->
              
              <div v-if="pay_type != 'yi'">
                <div class="wechater f-j-a-c">
                <div
                  v-html="payCodeUrl"
                  class="pay-code-img f-j-a-c"
                  v-if="payCodeUrl"
                ></div>
                <div class="chongxin f-d-c f-j-a-c" v-else>
                  <svg-icon name="loading"></svg-icon>
                </div>
                </div>
                <div class="weix f-a-c f-j-a-c">
                <svg-icon class="svg" name="icon-wx"></svg-icon>
                  微信支付
                </div>
              </div>

              <!-- 支付按钮 -->
              <!-- <div class="btn-box f-j-a-c" v-if="chongzhiCurrent == 1">
                <div class="confirm-btn f-j-a-c" @click="openPayPwdPop">
                  立即购买
                </div>
              </div> -->

              <!-- <div class="yuechoose f-j-a-c" v-if="chongzhiCurrent == 1">
                <div class="f-a-c">
                  <el-checkbox v-model="checked1" label="余额支付 " size="large" />
                  <span>￥1000</span>
                </div>
                <div class="f-a-c ran" v-if="listenchecked1">
                  <el-checkbox v-model="checked2" label="硬币抵扣" size="large" />
                  <span>￥1000</span>
                </div>
              </div> -->
            </div>
          </div>

          <div v-if="current == 5">
            <span>我的{{ coinsConfig.name }}</span>

            <div class="gouse f-a-c">
              <span>{{ myFueloil }}</span>
              <!-- <div class="buttonuse click f-j-a-c">去使用</div> -->
            </div>
          </div>
          <div class="shimingrenzheng" v-if="shimingCheck">
            <span>个人实名认证</span>
            <div class="shimingrenzhengbox f-d-c">
              <span>实名认证权益</span>
              <p>
                实名认证后，您可获得的权益：1.收益资金提现 2.陆续开放更多权益
              </p>
              <p>身份信息证明图片官方承诺仅用于认证审核不做其他用途</p>
            </div>
            <div class="readlname f-a-c" v-if="!tijiaoCheck">
              <div class="readitem f-d-c">
                <span>真实姓名</span>
                <input type="text" placeholder="请输入您的真实姓名" />
              </div>
              <div class="readitem f-d-c">
                <span>身份证号码</span>
                <input type="text" placeholder="请输入您的身份证号码" />
              </div>
            </div>
            <div class="readimg" v-if="!tijiaoCheck">
              <span>身份证照片</span>
              <div class="readimgbox f-a-c">
                <div
                  class="zhaip click f-d-c f-j-a-c"
                  v-for="(item, index) in shiming"
                  :key="index"
                >
                  <div class="imgbox">
                    <img :src="item.img" alt="" />
                    <div class="momzhan f-j-a-c f-d-c">
                      <svg-icon name="icon-tj-baise"></svg-icon>
                      <span>上传{{ item.title }}</span>
                    </div>
                  </div>
                  <span class="zhaititle">{{ item.title }}</span>
                  <span>{{ item.text }}</span>
                </div>
              </div>
            </div>

            <div
              class="buttonsfz f-j-a-c click"
              @click="tijiao"
              v-if="!tijiaoCheck && current < 0"
            >
              提交
            </div>
            <div class="successgo f-j-a-c f-d-c">
              <svg-icon class="svg" name="icon-cg-50"></svg-icon>
              <span>提交成功</span>
              <span>实名认证申请已提交，请耐心等待1-2个工作日</span>
            </div>
          </div>
        </div>
        <div class="tishi" v-if="judgmentCheck">
          <span>温馨提示</span>
          <p class="tishiRED">
            1、余额分为充值余额和收益余额,充值余额可通过充值获取;
          </p>
          <p>
            2、充值成功后，余额可能存在延迟现象，一般1到5分钟内到账，如有问题，请咨询客服；
          </p>
          <p>3、收益可以转入余额进行消费，但是一旦收益转入余额不可退款；</p>
          <p>4、充值金额输入值必须是不小于5元不可大于5000元的正整数；</p>
          <p>5、满足微信的充值方式;</p>
          <p class="tishiRED">
            6、充值完成后，您可以进入账户充值记录页面进行查看余额充值状态或查看通知系统将会为您发送充值通知；
          </p>
        </div>
        <div class="tixian" v-if="current == 6">
          <div class="titxianbox f-a-c f-j-sb-a-c">
            <div
              class="tixianitem f-d-c"
              v-for="(item, index) in titxianbox"
              :key="index"
            >
              <div class="titilespan f-a-c">
                <span>{{ item.title }}</span>
                <!-- <svg-icon name="icon-wh"></svg-icon> -->
              </div>
              <div class="tixiancontent f-a-c">
                <span>{{ item.money }}</span>
                <div
                  class="tixianbutton click f-j-a-c"
                  @click="titxianboxClick"
                  v-if="item.buttonText"
                >
                  <span :style="{ color: item.color }">{{
                    item.buttonText
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 我的余额列表 -->
        <div
          class="shouyilist"
          v-if="
            (current == 4 && !judgmentCheck) || (current == 5 && !judgmentCheck)
          "
        >
          <div class="shouyitop f-a-c">
            <div
              class="shouyiitem click"
              v-for="(item, index) in shouyitop"
              :key="index"
              @click="shouyitopCLick(index)"
              style="margin-left: 0"
            >
              <span>{{ item.text }}</span>
              <!-- <div class="lines" v-if="shouyiCurrent == index"></div> -->
            </div>
          </div>
          <div class="screen f-a-c" v-if="current == 4">
            <div class="screenitem">
              <span>收支类型</span>
            </div>
            <div class="xiala">
              <div
                class="screenChoose click f-a-c f-j-sb-a-c"
                @click="opennow = !opennow"
              >
                <span>{{ spanall }}</span>
                <svg-icon name="icon-zk"></svg-icon>
              </div>
              <div class="downloadbox f-d-c" v-if="opennow">
                <div
                  @click="boxitemlistClcik(item, index)"
                  class="boxitem f-a-c"
                  v-for="(item, index) in boxitemlist"
                  :key="index"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
            <div class="choosemonun">
              <span>选择月份</span>
              <el-date-picker
                @change="timechange"
                v-model="value2"
                type="month"
                placeholder="Pick a month"
              />
            </div>
            <div class="shaixuanbutto click f-j-a-c" @click="shaixuan">
              筛选
            </div>
          </div>

          <div class="list f-a-c f-j-sb-a-c">
            <div
              class="listitem f-j-a-c"
              v-for="(item, index) in shouyiCurrent == 0 ? yuemingxi : topup"
              :key="index"
            >
              {{ item.title }}
            </div>
          </div>
          <div
            class="yuelist"
            ref="observer"
            @scroll="handleScroll"
            v-if="yuemingxi"
          >
            <div
              class="yuelistitem f-j-sb-a-c"
              v-for="(item, index) in yuminglist"
              :key="index"
              :style="{ height: current == 4 ? '' : '60px' }"
            >
              <span>{{ item.created_at }}</span>
              <span>{{ item.num_str > 0 ? "收入" : "支出" }}</span>
              <span>{{ current == 4 ? item.type_name : item.tip }}</span>
              <span>{{ item.num_str }}</span>
            </div>
          </div>
          <!-- 无数据展示 -->
        </div>

        <!-- 收益提现 -->
        <div class="shouyilist" v-if="current == 6">
          <div class="shouyitop f-a-c">
            <div
              class="shouyiitem click"
              v-for="(item, index) in shouyitop"
              :key="index"
              @click="shouyitopCLick(index)"
              style="margin-left: 0"
            >
              <!-- :class="shouyiCurrent == index ? 'shouyiactive' : ''" -->
              <span>{{ item.text }}</span>
              <!-- <div class="lines" v-if="shouyiCurrent == index"></div> -->
            </div>
          </div>
          <div class="list f-a-c f-j-sb-a-c">
            <div
              class="listitem f-j-a-c"
              v-for="(item, index) in earnings"
              :key="index"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="yuelist">
            <div
              class="yuelistitem f-j-sb-a-c"
              v-for="(item, index) in withdrawList"
              :key="index"
            >
              <span>{{ item.created_at }}</span>
              <span>{{ item.price }}</span>
              <span>{{ item.status_value }}</span>
            </div>
            <div
              class="community-card-box no-data-box"
              v-if="!withdrawList.length"
            >
              <noData></noData>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: relative; z-index: 51">
      <el-dialog
        v-model="tixianpop"
        width="480px"
        style="border-radius: 20px"
        :before-close="handleClose"
      >
        <div class="shenqingtixian">
          <span>申请提现</span>
        </div>
        <div class="tixianmoney f-d-c">
          <span>提现金额</span>
          <input type="number" placeholder="请输入提现金额" v-model="money" />
          <span>支行名称</span>
          <input type="text" placeholder="请输入支行名称" v-model="zhihang" />
          <span>银行卡号</span>
          <input
            type="number"
            placeholder="请输入银行卡号"
            v-model="yinhangkh"
          />
          <span
            >结算金额：<span style="color: #ff425b">￥{{ money }}</span></span
          >
        </div>
        <div class="buttonqeue f-j-a-c click" @click="postinitiateWithdrawal">
          确认提现
        </div>
        <p class="tishispan">
          注：由于微信给商家的统一费率
          <span style="color: #ff425b">0.6%</span>
          ，提现默认到的账金额将会扣除0.6%费率（最低0.60）
        </p>
      </el-dialog>
    </div>

    <div class="moban" @click="mobanCLick" v-if="opennow"></div>
  </div>
</template>

<script>
import payPwdPop from "@/views/community/components/payPwdPop.vue";
import { Modnickname, userinfo } from "@/axios/api.js";
import upload from "@/components/upload.vue";
import { showLoading, hideLoading } from "@/utils/loading.js";
import vueQr from "vue-qr/src/packages/vue-qr.vue";
import {
  paycode,
  myFinancial,
  financialRecord,
  coinsRecord,
  myUserWithdrawal,
  initiateWithdrawal,
  membersdata,
  appOrder,
  payStatus,
  getUserInfo,
  balancePay,
  xiugaiinfo,
} from "@/axios/community.js";
import { putFile } from "@/axios/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  watch,
} from "vue";

import { useStore } from "vuex";
export default defineComponent({
  components: {
    upload,
    vueQr,
    payPwdPop,
  },
  setup() {
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let minUserInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let minToken = computed(() => {
      return store.state.minToken;
    });
    let coinsConfig = computed(() => {
      let setting = store.state.globalConfig;
      if(setting.app && setting.app.coins){
        return setting.app.coins;
      }
      return {name: '硬币'};
    });
    const payPwdRef = ref(null);

    const observer = ref(null);
    const uploadRef = ref(null);
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      pay_type: 'code_pc',
      moneyitemcurrent: 2,
      payCodeUrl: "", //支付二维码
      bandingList: [],
      myFueloil: 0,
      currentScreen: 0, // 筛选下标
      opennow: false,
      passwordstatus: false,
      money: "",
      judgmentCheck: false,
      listenchecked1: false,
      checked1: false,
      checked2: false,
      chongxincheck: false,
      qrcodeVal: "123123",
      minutes: 1,
      seconds: 0,
      FuoilMoney: [
        {
          sales: "20",
          price: "20",
        },
        {
          sales: "50",
          price: "50",
        },
        {
          sales: "100",
          price: "100",
        },
        {
          sales: "300",
          price: "300",
        },
      ],
      Fuoil: [],
      chongzhiCurrent: 0,
      chongzhi: [
        {
          text: "余额充值",
          yao: "畅游海量模型世界",
          color: "#000000",
          color1: "#656F79",
          bgi: new URL("../../../assets/image/qh-ranyou.png", import.meta.url),
        },
        {
          text: "会员套餐",
          yao: "享受会员特权",
          color: "#B87100",
          color1: "#B87100",
          bgi: new URL("../../../assets/image/qh-bai.png", import.meta.url),
        },
      ],
      topup: [
        {
          title: "日期",
        },
        {
          title: "金额",
        },
        {
          title: "类型",
        },
        {
          title: "状态",
        },
      ],
      shouyiDetails: [
        {
          title: "日期",
        },
        {
          title: "收益来源",
        },
        {
          title: "金额",
        },
      ],
      yuminglist: [],
      yuemingxi: [
        {
          title: "日期",
        },
        {
          title: "收入/支出",
        },
        {
          title: "类型",
        },
        {
          title: "金额",
        },
      ],
      earnings: [
        {
          title: "日期",
        },

        {
          title: "金额",
        },
        {
          title: "状态",
        },
      ],
      boxitemlist: [
        {
          title: "全部",
        },
        {
          title: "收入",
        },
        {
          title: "支出",
        },
        {
          title: "充电",
        },
        {
          title: "创作收益",
        },
        {
          title: "文章付费",
        },
      ],
      value2: 0,
      shouyiCurrent: 0,
      shouyitop: [
        {
          text: "提现详情",
        },
        {
          text: "收益详情",
        },
      ],
      shouyi: [
        {
          text: "余额明细",
        },
        {
          text: "充值记录",
        },
      ],
      balanceList: [
        {
          title: "总计",
          num: "0",
          value: "balance",
        },
        {
          title: "可提现",
          num: "0",
          value: "balance",
        },
        {
          title: "已提现",
          num: "0",
          value: "withdrawal_price",
        },
        {
          title: "已充值余额",
          num: "0",
          value: "sum_price",
        },
      ],
      activeNames: -1,
      city: "", // 城市
      linkdetail: "", // 文本
      moren: new URL("../../../assets/image/tx@2x.png", import.meta.url),
      fileList: [],
      drawingUrlL: "",
      password: "",
      password1: "",
      textareatext: "",
      radio1: 0,
      avatar: "", // 头像链接
      inputtext: "",
      current: 0,
      SettingList: [
        [
          {
            text: "个人中心",
          },
          {
            svg: "icon-geren-w",
            svg1: "icon-geren",
            text: "个人信息",
          },
          {
            svg: "icon-bangding",
            svg1: "icon-bangding-w",
            text: "绑定账号",
          },
          {
            svg: "icon-xgm",
            svg1: "icon-gaimima",
            text: "修改支付密码",
          },
        ],
        [
          {
            text: "账户管理",
          },
          {
            svg: "icon-yue",
            svg1: "icon-yue-yx",
            text: "我的余额",
          },
          {
            svg: "icon-ranyou",
            svg1: "icon-ranyou-yx",
            text: "我的硬币",
          },
          {
            svg: "icon-xgm",
            svg1: "icon-tx",
            text: "收益提现",
          },
        ],
      ],
      name: "",
      userinfo: "",
      opennow: false,
      spanall: "全部",
      titxianbox: [
        {
          title: "当前总收益",
          money: "0",
          value: "balance",
        },
        {
          title: "当前可提现收益",
          money: "0",
          buttonText: "申请提现",
          color: "#FF425B",
          value: "balance",
        },
        {
          title: "累计提现金额",
          money: "0",
          value: "withdrawal_price",
        },
      ],
      shimingCheck: false,
      shiming: [
        {
          title: "正面照片",
          img: new URL("../../../assets/image/fan.jpg", import.meta.url),
          text: "*支持 .JPG .JPEG .PNG不超过2M",
        },
        {
          title: "反面照片",
          img: new URL("../../../assets/image/zheng.jpg", import.meta.url),
          text: "*支持 .JPG .JPEG .PNG不超过2M",
        },
      ],
      tijiaoCheck: false,
      tixianpop: false,
      passwordSuccess: false,
      withdrawList: [],
      zhihang: "",
      yinhangkh: "",

      rechargeItem: "", //充值选中项
      rechargeAmount: 100, //充值金额
      rechargeAmountInput: "", //自定义充值输入框
      payStatusTimer: null, //查询订单状态
      payOrderId: "", //支付订单id
      payObjInfo: {}, //余额支付购买会员
    });
    onMounted(() => {
      stopScrolling();
      startCountdown();
      passwordchekc();
      if (minToken.value) {
        getmyFinancial();
      }
      getfinancialRecord(0);

      if(data.pay_type != 'yi'){
        getAppOrder();
      }
      

      updateUserInfo();
      if (router.currentRoute._value.query.TopUpNowType) {
        data.current = 4;
        judgmentCheckclick();
      }

      if (router.currentRoute._value.query.pwd) {
        data.current = 2;
      }

      data.name = minUserInfo.value.user_name;
      data.radio1 = minUserInfo.value.gender;
      data.textareatext = minUserInfo.value.user_introduce;
      data.avatar = minUserInfo.value.user_avatar;
    });
    watch(
      () => data.checked1,
      (newVal, oldVal) => {
        //console.log(newVal);
        if (newVal) {
          data.listenchecked1 = true;
        } else {
          data.listenchecked1 = false;
        }
      }
    );

    onUnmounted(() => {});
    // 申请提现
    let postinitiateWithdrawal = () => {
      if (data.money <= 0 || !data.money) {
        ElMessage.error("请输入正确的提现金额");
        return;
      }
      if (data.money < Number(data.titxianbox[1].num)) {
        ElMessage.error("可提现金额不足");
        return;
      }

      initiateWithdrawal({
        price: data.money,
        bank_name: data.zhihang,
        bank_card: data.yinhangkh,
      }).then((res) => {
        data.tixianpop = false;
        ElMessage.success("申请成功，等待审核通过");
        getmyUserWithdrawal();
      });
    };

    // 获取二维码
    let getAppOrder = () => {
      data.payCodeUrl = "";
      let datas = {};

      datas.provider = 'wxpay';
      datas.pay_type = data.pay_type;
      datas.type = data.chongzhiCurrent == 0 ? 3 : 1;
      if (data.chongzhiCurrent == 0) {
        datas.parame = {};

        datas.parame.recharge = data.rechargeAmount;
      } else {
        datas.parame = data.Fuoil[data.moneyitemcurrent];
      }
      appOrder({ ...datas }).then((res) => {
        if(res.status){
          if(data.pay_type != 'yi'){
            data.payCodeUrl = res.data.code;
            data.payOrderId = res.data.query_state_no;
          }else{
            window.open(res.data.direct, '_blank');
          }
        }else{
          ElMessage.warning(res.message);
        }
        
        // getPayStatus();
      });
    };

    // 充值套餐点击
    let selectFuoil = (item, index) => {
      data.rechargeAmount = item.price;
      data.rechargeItem = item;
      data.moneyitemcurrent = index;

      getAppOrder();
    };

    // 自定义输入enter
    let inputEnter = () => {
      if (!data.rechargeAmountInput || !Number(data.rechargeAmountInput)) {
        return ElMessage.warning("请输入正确金额");
      }
      data.rechargeAmount = data.rechargeAmountInput;
      getAppOrder();
    };

    // 立即购买按钮
    let openPayPwdPop = () => {
      if (!minUserInfo.value.paycode) {
        ElMessage.error("请先设置支付密码");
        data.current = 2;
        data.judgmentCheck = false;
        return;
      }

      data.payObjInfo = {
        price: data.rechargeAmount, //需支付余额
      };
      payPwdRef.value.open();
    };

    // 密码输入完确定按钮
    let postPostsPay = (pwd) => {
      showLoading();
      //  // 购买帖子
      let params = {
        order: {
          price: data.rechargeItem.price,
          days: data.rechargeItem.days,
          coins_num: 0, //硬币抵扣
          type: 1,
        },
        paycode: (pwd + "").split(""), //支付密码
      };
      // // 余额支付 / 组合支付
      balancePay(params)
        .then((res) => {
          hideLoading();
          ElMessage.success("购买成功!");
          updateUserInfo();
        })
        .catch((err) => {
          hideLoading();
        });
    };

    // 更新用户信息
    let updateUserInfo = () => {
      getUserInfo().then((res) => {
        store.commit("saveminUserInfo", res.data);
      });
    };

    // 查询订单状态
    let getPayStatus = () => {
      clearInterval(data.payStatusTimer);
      let getStatus = payStatus({
        query_state_no: data.payOrderId,
      }).then((res) => {
        console.log(res);
      });
      data.payStatusTimer = setInterval(getStatus, 3000);
    };

    // 会员列表
    let gethuiyuan = () => {
      membersdata().then((res) => {
        data.Fuoil = res.data.options;
        data.rechargeAmount = data.Fuoil[2].price;
        data.rechargeItem = data.Fuoil[0];
        if(data.pay_type != 'yi'){
          getAppOrder();
        }
      });
    };

    //判断是否有密码
    let passwordchekc = () => {
      let id = "?type=0&password=" + data.password1;
      paycode({ id }).then((res) => {
        if (res.data.status == 1) {
          data.passwordstatus = true;
        }
      });
    };
    // 查询提现列表
    let getmyUserWithdrawal = () => {
      let id = "?setUserid=0";
      myUserWithdrawal({ id }).then((res) => {
        data.withdrawList = res.data;
      });
    };
    //查询余额
    let getmyFinancial = () => {
      let id = "?setUserid=0";
      myFinancial({ id }).then((res) => {
        data.myFueloil = res.data.coins.total;
        data.yinhangkh = res.data.financial.bank_card;
        data.zhihang = res.data.financial.bank_name;
        data.titxianbox.forEach((item, index) => {
          item.money = res.data.financial[item.value] || 0;
        });
        data.balanceList.forEach((item, index) => {
          item.num = res.data.financial[item.value] || 0;
        });
      });
    };
    // 修改密码
    let xiupaycode = () => {
      if (data.passwordSuccess) {
        if (data.password != data.password1) {
          ElMessage.error("两次密码不一致");
          return;
        }
      }
      let typeid;
      if (!minUserInfo.value.paycode) {
        typeid = 1;
      } else {
        typeid = 2;
      }
      let id = "?type=" + typeid + "&password=" + data.password;
      paycode({ id }).then((res) => {
        ElMessage.success("设置成功");
        data.password = "";
        data.password1 = "";
        data.passwordSuccess = true;
        store.dispatch("updateUserInfo");
      });
    };
    // 关闭弹窗
    let handleClose = () => {
      data.tixianpop = false;
    };
    // 余额明细切换
    let shouyitopCLick = (index) => {
      data.shouyiCurrent = index;
    };
    // 去充值
    let judgmentCheckclick = () => {
      data.judgmentCheck = true;
      data.Fuoil = data.FuoilMoney;
    };
    watch(
      () => [data.minutes, data.seconds],
      (newVal, oldVal) => {
        if (data.minutes === 0 && data.seconds === 0) {
          clearInterval(countdown);
          data.chongxincheck = true;
          // 倒计时完成后执行其他操作
        }
      }
    );
    const countdown = () => {
      if (data.seconds > 0) {
        data.seconds--;
      } else if (data.minutes > 0) {
        data.minutes--;
        data.seconds = 59;
      }
    };
    const startCountdown = () => {
      // setInterval(countdown, 1000);
    };
    let titxianboxClick = () => {
      data.tixianpop = true;
    };
    // 时间搜索
    let timechange = (e) => {};
    let shaixuan = () => {
      let time = data.value2 > 0 ? data.value2.getMonth() + 1 : 0;
      // 查询所有时间数据
      getfinancialRecord(data.currentScreen, time, true);
    };

    // 时间类型搜索
    let searchType = (index, items) => {
      switch (index) {
        case 0:
          // 全部
          data.yuminglist.push(items);
          break;
        case 1:
          // 收入
          if (items.num_str > 0) {
            data.yuminglist.push(items);
          }
          break;
        case 2:
          // 支出
          if (items.num_str < 0) {
            //console.log(items);
            data.yuminglist.push(items);
          }
          break;
        case 3:
          // 充电
          if (items.type == 0 || items.type == 10) {
            data.yuminglist.push(items);
          }
          break;
        case 4:
          // 创作收益
          if (items.type == 12) {
            data.yuminglist.push(items);
          }
          break;
        case 5:
          // 文章付费
          if (items.type == 7) {
            data.yuminglist.push(items);
          }
          break;
      }
      //console.log(data.yuminglist);
    };
    // 硬币记录
    let getcoinsRecord = () => {
      let id = "?setUserid=0";

      coinsRecord({ id }).then((res) => {
        let arr = res.data;

        data.yuminglist = arr;
      });
    };
    // 余额列表
    let getfinancialRecord = (index, time, type) => {
      let id = "?setUserid=0";
      financialRecord({ id }).then((res) => {
        //console.log(res);
        let arr = res.data;
        data.yuminglist = arr;
        if (type) {
          data.yuminglist = [];
          arr.forEach((items, indexs) => {
            let listTime = items.created_at.slice(6, 7);
            if (time == 0) {
              searchType(index, items);
            } else {
              let checkTypeTime = listTime == time;
              if (checkTypeTime) {
                searchType(index, items);
              } else {
                data.yuminglist = [];
              }
            }
          });
        }
      });
    };
    let SettingListClick = (index, indexs) => {
      data.judgmentCheck = false;
      if (index == 0) {
        data.current = indexs - 1;
      } else if (index == 1) {
        data.current = indexs + 3;
      }
      data.shimingCheck = false;
      if (data.current == 5) {
        let datas = [
          {
            text: "硬币明细",
          },
        ];
        data.shouyitop = datas;
        getcoinsRecord();
      } else if (data.current == 4) {
        let datas = [
          {
            text: "余额明细",
          },
          // {
          //   text: "充值记录",
          // },
        ];
        data.shouyitop = datas;
        getfinancialRecord();
        getmyFinancial();
      } else if (data.current == 6) {
        let datas = [
          {
            text: "提现详情",
          },
        ];
        data.shouyitop = datas;
        getmyUserWithdrawal();
      }
    };
    let fileQueued = () => {
      showLoading();
    };
    // 全部下拉框
    let boxitemlistClcik = (item, index) => {
      data.spanall = item.title;
      data.opennow = false;
      data.currentScreen = index;
    };
    let chongzhiCLick = (index) => {
      if (data.chongzhiCurrent == index) return;

      data.chongzhiCurrent = index;
      if (index == 1) {
        data.moneyitemcurrent = 2;
        gethuiyuan();
      } else {
        // index = 2;
        data.moneyitemcurrent = 2

        data.Fuoil = data.FuoilMoney;
        data.rechargeAmount = data.Fuoil[data.moneyitemcurrent].price;
        data.rechargeItem = data.Fuoil[data.moneyitemcurrent];
        if(data.pay_type != 'yi'){
          getAppOrder();
        }
      }
    };
    // 页面滚动开关
    let stopScrolling = (type) => {
      let overflowStyle = type ? "visible" : "hidden";
      document.body.style.overflow = overflowStyle;
      document.addEventListener("touchmove", data.m, { passive: type });
    };
    let bandingClick = () => {
      ElMessage.error("暂未开放");
    };
    // 实名认证
    let shimingClick = () => {
      data.shimingCheck = true;
      data.current = -1;
    };
    // 上传头像
    let uploadsucess = (value) => {
      data.avatar = value

      hideLoading();
    };
    // 选择
    let handleChange = (e) => {
      //console.log(data.activeNames);
    };
    let getuserinfo = () => {
      userinfo().then((res) => {
        ////console.log(res.data);
        data.userinfo = res.data;

        let dataslist = res.data;
        dataslist.mininfo = store.state.minUserInfo;
        store.commit("saveUserInfo", res.data);
      });
    };
    let getModnickname = () => {
      let datas = {};
      datas.user_name = data.name;
      datas.user_introduce = data.textareatext;
      datas.user_avatar = data.avatar;
      datas.user_background_maps = minUserInfo.value.user_background_maps;
      data.user_birthday = minUserInfo.value.user_birthday;
      data.user_id = 0;
      data.user_labels = minUserInfo.value.user_labels;
      datas.gender = data.radio1;
      // datas.address = data.city;
      // datas.tele = data.linkdetail;
      xiugaiinfo({ ...datas })
        .then((res) => {
          updateUserInfo();
          return ElMessage.success("修改成功");
        })
        .catch((err) => {
          return ElMessage.error(err.message);
        });
    };
    // 上传预览图片
    let uploadVideo = (e) => {
      data.formData.drawingUrl = e;
    };
    // 文件贴图上传
    let uploadChartlet = async (e) => {
      showLoading();
      let formData = new FormData();
      let uid = e.file.uid;
      formData.append("file", e.file);
      await putFile(formData).then((res) => {
        let datas = {};
        datas.uid = uid;
        datas.link = res.data.link;
        data.chartletImgList.push(datas);
        hideLoading();
      });
    };
    let inputtext = (e) => {};
    let handleScroll = () => {
      let observerElement = observer.value;
      if (
        observerElement.scrollTop + observerElement.clientHeight >=
        observerElement.scrollHeight - 5
      ) {
        // 滚动到底部时加载更多数据
        // getlist(0);
      }
    };
    let tijiao = () => {
      data.tijiaoCheck = true;
    };
    // 模板点击
    let mobanCLick = () => {
      data.opennow = false;
    };
    return {
      minToken,
      minUserInfo,
      postPostsPay,
      coinsConfig,
      openPayPwdPop,
      payPwdRef,
      inputEnter,
      gethuiyuan,
      userInfo,
      postinitiateWithdrawal,
      getmyUserWithdrawal,
      getcoinsRecord,
      searchType,
      shaixuan,
      timechange,
      mobanCLick,
      getfinancialRecord,
      getmyFinancial,
      passwordchekc,
      xiupaycode,
      handleClose,
      titxianboxClick,
      tijiao,
      shimingClick,
      judgmentCheckclick,
      startCountdown,
      countdown,
      chongzhiCLick,
      observer,
      handleScroll,
      boxitemlistClcik,
      shouyitopCLick,
      handleChange,
      fileQueued,
      getuserinfo,
      getModnickname,
      uploadsucess,
      uploadChartlet,
      uploadRef,
      uploadVideo,
      bandingClick,
      inputtext,
      SettingListClick,
      stopScrolling,
      selectFuoil,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.moban {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.buttonqeue {
  margin: 0 auto;
  margin-top: 86px;
  width: 182px;
  height: 40px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 90px 90px 90px 90px;
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #ffffff;
}
.tishispan {
  margin-top: 10px;
}
.tixianmoney {
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
    &:last-child {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
  > input {
    margin: 10px 0;
    border: none;
    width: 440px;
    height: 46px;
    background: #f3f4f5;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    padding: 0 20px;
  }
}
.shenqingtixian {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  > span {
    font-size: 18px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
}
.successgo {
  padding-top: 152px;
  padding-bottom: 165px;
  .svg {
    font-size: 50px;
  }
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
    display: block;
    margin: 20px 0;
    &:last-child {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
}
.momzhan {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.7);
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.buttonsfz {
  margin-top: 50px;
  width: 100px;
  height: 46px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #ffffff;
}
.readimg {
  margin-top: 40px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
  .readimgbox {
    margin-top: 10px;
    .zhaip {
      .imgbox {
        position: relative;
        &:hover {
          .momzhan {
            opacity: 1;
          }
        }
      }
      > img {
        width: 302px;
        height: 180px;
      }
      &:last-child {
        margin-left: 20px;
      }
      .zhaititle {
        display: block;
        margin: 10px 0 10px 0;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
      > span {
        &:last-child {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
  }
}

.shimingrenzheng {
  > span {
    font-size: 18px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .shimingrenzhengbox {
    padding: 10px;
    margin-top: 20px;
    width: 850px;
    height: 95px;
    background: #f5f6f7;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      display: block;
      margin-bottom: 10px;
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    > p {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
      margin-bottom: 5px;
    }
  }
  .readlname {
    .readitem {
      margin-top: 40px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
      > input {
        margin-top: 10px;
        border: none;
        width: 300px;
        height: 46px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid #ececec;
        padding: 0 10px;
      }
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}

.tixian {
  .titxianbox {
    .tixianitem {
      justify-content: space-between;
      width: 243px;
      height: 142px;
      background: #ffffff;
      border-radius: 20px 20px 20px 20px;
      opacity: 1;
      // margin-right: 22px;
      padding: 20px;
      .titilespan {
        > span {
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #000000;
        }
      }
      .tixiancontent {
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #64c8dc;
        }
        .tixianbutton {
          margin-left: 30px;
          width: 100px;
          height: 40px;
          border-radius: 162px 162px 162px 162px;
          opacity: 1;
          border: 1px solid #ececec;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
        }
      }
    }
  }
}
.gouse {
  margin-top: 40px;
  > span {
    font-size: 24px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #ff425b;
  }
  .buttonuse {
    width: 100px;
    height: 40px;
    border-radius: 162px 162px 162px 162px;
    opacity: 1;
    border: 1px solid #ececec;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    margin-left: 30px;
    color: #656f79;
  }
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-color: #9ed8e6;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #656f79;
}
.yuechoose {
  margin-top: 30px;
  > div {
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #ff425b;
    }
  }
  .ran {
    margin-left: 60px;
  }
}
.tishi {
  margin-top: 20px;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  > p {
    margin-top: 5px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.tishiRED {
  color: #ff425b !important;
}
.weix {
  margin-top: 20px;
  .svg {
    margin-right: 10px;
  }
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #000000;
}
.wechater {
  position: relative;
  margin: 0 auto;
  margin-top: 40px;
  width: 200px;
  height: 200px;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #43c93e;

  .pay-code-img {
    width: 200px;
    height: 200px;
    :deep(svg) {
      width: 190px;
      height: 190px;
    }
  }

  > img {
    width: 140px;
    height: 140px;
  }
  .chongxin {
    cursor: pointer;
    width: 200px;
    height: 200px;
    :deep(svg) {
      width: 40px;
      height: 40px;
      animation: rotate 0.5s linear infinite; /* 4秒一次完整旋转 */
    }
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.chooseFueloil {
  padding: 40px 20px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .FUeloilMonye {
    margin-top: 20px;
    .moneyitemactive {
      border: 1px solid #b97202 !important;
    }
    .xianshi {
      position: absolute;
      left: 0;
      top: 0;

      .xiashiie {
        position: relative;
        > span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          white-space: nowrap;
        }
      }
    }
    .youhui {
      width: 66px;
      height: 20px;
    }
    .moneyitem {
      position: relative;
      width: 162px;
      height: 150px;
      border: 1px solid #fae8d0;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      margin-right: 10px;
      > span {
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #b87100;
      }
      &:last-child {
        margin-right: 0;
      }
      .moneybox {
        display: flex;
        flex: 1;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          &:last-child {
            margin-top: 20px;
            font-size: 20px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: 700;
            color: #b87100;
          }
        }
        > input {
          border: none;
          width: 89px;
          height: 26px;
          margin-top: 20px;
          font-size: 18px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #b87100;
          text-align: center;
        }
        > input::placeholder {
          font-size: 18px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #b87100;
        }
      }
      .icon-check {
        position: absolute;
        bottom: 0;
        right: 0;
      }
      .moneybottom {
        // position: absolute;
        // bottom: 0;
        height: 39px;
        width: 100%;
        background-color: #fae8d0;
        border-radius: 0 0 10px 10px;
        > span {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #6f4916;
        }
      }
    }
  }
}
.time {
  margin-top: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ff425b;
}
.paymoney {
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    &:last-child {
      font-size: 20px;
      font-weight: 700;
      color: #ff2744;
    }
  }
}
.Fueloil {
  background-color: #fff;
  border-radius: 20px;
  // height: 600px;
  padding-bottom: 54px;
}
.Fueloil_top {
  border-radius: 20px 20px 0 0;

  width: 100%;
  height: 60px;
  background: #f5f6f7;
  opacity: 1;
  .item {
    width: 50%;
    height: 100%;
    background-size: 100% 100%;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #b87100;
      &:last-child {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        margin-left: 18px;
      }
    }
    &:first-child {
      padding-left: 20px;
    }
    &:last-child {
      > span {
        &:first-child {
          // margin-left: 75px;
        }
      }
    }
  }
}
.yuelist::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
.yuelist::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
.yuelist::-webkit-scrollbar-track {
  background-color: #f7f9fa;
  height: 80% !important;
}

/* 鼠标悬停时滚动条轨道样式 */
.yuelist::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}

.yuelist {
  height: 500px;
  overflow: auto;
  .yuelistitem {
    padding: 0 60px 0 20px;
    // padding: 0 20px;
    height: 50px;
    > span {
      display: block;
      width: 180px;
      text-align: center;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;

      font-size: 14px;
    }
    &:nth-child(2n) {
      background-color: #f5f6f7;
    }
  }
}
.list {
  margin-top: 30px;
  height: 50px;
  background-color: #f5f6f7;
  padding: 0 60px 0 20px;
  .listitem {
    width: 180px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
}
.screen {
  margin-top: 29px;
  .screenitem {
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
  .screenChoose {
    margin-left: 20px;
    padding: 0 20px;
    width: 160px;
    height: 46px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #64c8dc;
  }
}
.choosemonun {
  margin-left: 40px;
}
.shaixuanbutto {
  margin-left: 40px;
  width: 90px;
  height: 46px;
  border-radius: 126px 126px 126px 126px;
  opacity: 1;
  border: 1px solid #ececec;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #000000;
}
.xiala {
  position: relative;
  .downloadbox {
    position: absolute;
    top: 55px;
    z-index: 12;
    left: 20px;
    width: 162px;
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    .boxitem {
      padding: 18px 20px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000;
      height: 36px;

      &:hover {
        color: #64c8dc;
        background-color: rgba(100, 200, 220, 0.3);
      }
    }
  }
}
::v-deep .el-date-editor {
  margin-left: 13px;
  width: 160px;
  height: 46px;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #ececec;
}
.shouyilist {
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;

  background-color: #fff;
  .shouyitop {
    border-bottom: 1px solid #ececec;
    .shouyiactive {
      color: #64c8dc !important;
    }
    .shouyiitem {
      > span {
        margin-bottom: 18px;
        display: block;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
      .lines {
        width: 56px;
        height: 2px;
        background: #64c8dc;
        border-radius: 77px 77px 77px 77px;
        opacity: 1;
      }
      &:last-child {
        margin-left: 56px;
      }
    }
  }
}
.balanceList {
  padding: 29px 74px 20px 65px;
  .balanceitem {
    > span {
      font-size: 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
      &:last-child {
        margin-top: 5px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }
}
.chongzhi {
  .gochong {
    width: 100px;
    height: 40px;
    border-radius: 162px 162px 162px 162px;
    opacity: 1;
    border: 1px solid #64c8dc;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #64c8dc;
  }
  .zhuanru {
    margin-left: 20px;
    width: 100px;
    height: 40px;
    border-radius: 162px 162px 162px 162px;
    opacity: 1;
    border: 1px solid #ececec;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border: #64c8dc;
  background-color: #64c8dc;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #64c8dc;
}
.right {
  min-width: 780px;
  padding: 20px;
  .text {
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
  .userimg {
    margin-top: 20px;
    .imgbox {
      position: relative;
      &:hover {
        .imgzhe {
          display: block !important;
        }
      }
    }
    .imgzhe {
      display: none;

      position: absolute;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.9);
      top: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      .sctx {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
    img {
      display: block;
      position: relative;
      width: 80px;
      border-radius: 50%;
      height: 80px;
      object-fit: cover;
    }
    .upimg {
      margin-left: 10px;
      width: 110px;
      height: 40px;
      background: rgba(100, 200, 220, 0.12);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #64c8dc;
    }
  }
  .userinfo {
    .userimg {
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
      .inputbox {
        margin-top: 10px;
        width: 300px;
        height: 46px;
        opacity: 1;
        > input {
          padding: 0 10px;
          width: 100%;
          height: 100%;
          border: none;
          border-radius: 10px 10px 10px 10px;

          border: 1px solid #64c8dc;
        }
      }
      .email {
        width: 300px !important;
      }

      // &:last-child {
      //   margin-left: 20px;
      // }
    }
  }
  .xiugai {
    border-radius: 10px 10px 10px 10px;
    padding-left: 10px;
    background-color: #ececec !important;
    margin-top: 10px;
    width: 300px;
    height: 46px;
    opacity: 1;
    > span {
      color: #d9d9d9 !important;
    }
  }
  .daojishi {
    margin-left: 20px;
    width: 100px;
    height: 46px;
    background: rgba(100, 200, 220, 0.12);
    // background: #f3f4f5;
    border-radius: 10px 10px 10px 10px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #64c8dc;
  }
  .banding {
    margin-top: 40px;
    > span {
      font-size: 18px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      &:last-child {
        margin-top: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }
  .weibanding {
    margin-left: 20px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
  .bandingitem {
    margin-top: 20px;
    .wei {
      width: 40px;
      height: 40px;
    }
    .banbutton {
      margin: 0 30px;
      width: 100px;
      height: 46px;
      background: #f3f4f5;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
  .xinbie {
    margin-top: 40px;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
  .info {
    margin-top: 34px;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    .inputbox {
      position: relative;
      margin-top: 10px;

      height: 134px;
      opacity: 1;
      padding: 0 10px;
      border: none;
      border-radius: 10px 10px 10px 10px;

      border: 1px solid #64c8dc;
      > input {
        width: 100%;
        height: 100%;
        border: none;
      }
      > textarea {
        padding: 14px 10px;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #ececec;
        width: 100%;
        height: 100%;
        overflow: auto;
        border: none;
      }
      .span {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }
}
.buttonlist {
  margin: 30px 0 60px 0;
  .save {
    width: 100px;
    height: 46px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
  }
  .quxiao {
    margin-left: 20px;
    background: #f3f4f5 !important;
    > span {
      color: #656f79 !important;
    }
  }
}
.body {
  width: 100vw;
  height: 100%;
  // position: absolute;
  // top: 81px;
  // left: 0;
  z-index: 2;
  background: #f9f9f9;
}
.accoutSetting {
  margin-top: 30px;
  align-items: flex-start;
  margin-bottom: 60px;
}
.left {
  padding: 10px;
  margin-right: 20px;
  width: 200px;
  // height: 158px;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  .spanact {
    // display: none;
    color: #64c8dc !important;
  }
  // .left_item {
  .svg,
  .svg1 {
    margin-right: 4px;
  }
  .svg1 {
    display: none;
  }
  .svg {
    display: block;
  }
  cursor: pointer;
  // height: 46px;
  .leftbox {
    margin-bottom: 20px;
    .left_item {
      > span {
        font-size: 14px;
      }
      &:first-child {
        // > span {
        //   font-size: 16px;
        //   font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        //   font-weight: 700;
        //   color: #000000;
        // }
      }
      &:hover {
        .svg1 {
          display: block;
        }
        .svg {
          display: none;
        }
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          color: #64c8dc;
        }
      }
      &:active {
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  // }
}
.shiming {
  width: 110px;
  height: 40px;
  background: rgba(100, 200, 220, 0.12);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-left: 10px;

  > span {
    margin-left: 4px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #64c8dc;
  }
}
::v-deep .el-collapse-item__header {
  border: none;
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #000000;
}
::v-deep .el-collapse {
  border: none;
}
::v-deep .el-collapse-item__wrap {
  border: none;
  padding-bottom: 0;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
.right {
  // width: 780px;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
}
textarea:focus {
  outline: none;
}
/* 滚动条整体样式 */
textarea::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
textarea::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
textarea::-webkit-scrollbar-track {
  background-color: #f7f9fa;
}

/* 鼠标悬停时滚动条轨道样式 */
textarea::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
textarea {
  resize: none;
}

// 立即购买按钮
.btn-box {
  font-size: 14px;
  font-weight: bold;
  padding-top: 30px;
  > div {
    height: 46px;
    width: 260px;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
    &:active {
      opacity: 0.7;
    }
  }
}
</style>
